<template>
  <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-gray-100">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
      <img class="mx-auto h-12 w-auto" :src="img200" alt="Workflow" />
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">ECR Document Management</h2>
      <p class="mt-2 text-center text-sm text-gray-600">
        And
        {{ ' ' }}
        <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500" onclick="return false;"> sign in to your account </a>
      </p>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
      <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
        <form class="space-y-6" action="#" method="POST" @submit.prevent="submitLogin">
          <!-- username address -->
          <BaseInputGroup
            :error="v$.username.$error && v$.username.$errors[0].$message"
            label="username address"
            class="mb-4"
            required
          >
            <BaseInput
              v-model="loginData.username"
              type="email"
              name="username"
              focus
              :invalid="v$.username.$error"
              @input="v$.username.$touch()"
            />
          </BaseInputGroup>
          <!-- Password -->
          <BaseInputGroup
            :error="v$.password.$error && v$.password.$errors[0].$message"
            label="Password"
            class="mb-4"
            required
          >
            <BaseInput
              v-model="loginData.password"
              :invalid="v$.password.$error"
              :type="getInputType"
              name="password"
              @input="v$.password.$touch()"
            >
              <template #right>
                <BaseIcon
                  v-if="isShowPassword"
                  name="EyeSlashIcon"
                  class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                  @click="isShowPassword = !isShowPassword"
                />
                <BaseIcon
                  v-else
                  name="EyeIcon"
                  class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                  @click="isShowPassword = !isShowPassword"
                /> </template
            ></BaseInput>
          </BaseInputGroup>
          
          


          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
              <label for="remember-me" class="ml-2 block text-sm text-gray-900"> Remember me </label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500" onclick="return false;"> Forgot your password? </a>
            </div>
          </div>

          <div>
            <button 
              type="submit" 
              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              Sign in
            </button>
          </div>
        </form>

        <div class="mt-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-300" />
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-white text-gray-500"> Or connect us </span>
            </div>
          </div>

          <div class="mt-6">
            <div>
              <a href="https://www.datamega.net/" class="w-full inline-flex justify-center py-2 px-4 text-sm font-medium text-indigo-600 hover:text-indigo-500 underline">
                <span>www.datamega.net {{ t('hello') }}</span>
              </a>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>

  <NotificationRoot/>

</template>

<script setup>
import { ref, computed, reactive } from "vue"
// 校验
import { required, email, helpers } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'
// 状态
import { useAuthStore } from '@/stores/auth'
// 模板
import img200 from "@/assets/200x200.png"
import NotificationRoot from '@/components/notifications/NotificationRoot.vue'
import LS from '@/plugins/localstorage'
// 翻译
import { useI18n } from "vue-i18n"
// 跳转
import { useRouter } from 'vue-router'

const { t, locale } = useI18n()
const router = useRouter()

// ---------------- 是否密码显示 ---------------------
const isShowPassword = ref(false)

const getInputType = computed(() => {
  if (isShowPassword.value) {
    return 'text'
  }
  return 'password'
})
// ---------------- 表单 ------------------
const loginData = reactive({
  username: '',
  password: '',
})

const rules = {
  username: {
    required: helpers.withMessage(t('validation.required'), required),
    username: helpers.withMessage(t('validation.email_incorrect'), email),
  },
  password: {
    required: helpers.withMessage(t('validation.required'), required),
  },
}

const v$ = useVuelidate(
  rules,
  computed(() => loginData)
)

const authStore = useAuthStore()

// 表单提交
function submitLogin() {
  v$.value.$touch()

  if (v$.value.$invalid) {
    return true
  }

  authStore.login(loginData).then(function(response) {
    // 跳转
    router.push({name: 'home'})

    setTimeout(function() {
      loginData.username = ''
      loginData.password = ''
    }, 3000)
  })

}

// 变更语言
function changeLocale() {
  console.log('变更语言,', locale.value)
  locale.value = locale.value == 'en' ? 'zh' : 'en'
  LS.set('lang', locale.value)
  return false
}
</script>

<style scoped></style>